<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.ul {
	background-color: green;
}

.li1 {
	background-color: blue;
}

.li2 {
	background-color: red;
}

.li3 {
	background-color: pink;
}

.li4 {
	background-color: yellow;
}

li {
	float: left;
	list-style: none; /*去除小黑点  */
	margin: 10px;  /*间距  */
	width: 50px;
	height: 50px;
	cursor: pointer; /*鼠标变形  */
}

.li1:HOVER {
	border-radius: 15px;
	background-color: orange;
}

.li2:HOVER {
	border-radius: 15px; /* 弧度 */
	background-color: orange;
}

.li3:HOVER {
	border-radius: 15px;
	background-color: orange;
}

.li4:HOVER {
	border-radius: 15px;
	background-color: orange;
}
</style>
</head>
<body>
	<ul class="ul">
		<li class="li1">1</li>
		<li class="li2">2</li>
		<li class="li3">3</li>
		<li class="li4">4</li>
	</ul>
</body>
</html>